<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div {
            margin: 0 auto;
            width: 300px;            
        }
        h4 {
            background: rgb(255, 250, 232);
            padding: 8px 4px 0 20px;
            font-size: 13px;
            font-weight: bold;
            height: 30px;
            border-bottom: 1px solid #ecdfcc(157, 157, 157);
            cursor: pointer;
        }

        ul {
            height: 0;
            overflow: hidden;
            transition: all .3s linear;            
        }

        ul li {           
            padding-left: 30px;
            line-height: 30px;
            border: none;
            background-color: #FBF0D2;
            transition: all 1s ease 0s;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <script>
        var data = [{
            title: "首页",
            list: [""],
            isShow: false, //假设当前下拉没有显示
        }, {
            title: "概况",
            list: ["列表内容1", "列表内容2", "列表内容3"],
            isShow: false,
        }, {
            title: "楼层展览",
            list: ["列表内容1", "列表内容2", "列表内容3", "列表内容4"],
            isShow: false,
        }, {
            title: "科普活动",
            list: ["列表内容1", "列表内容2"],
            isShow: false,
        }, {
            title: "影院影讯",
            list: ["列表内容1", "列表内容2", "列表内容3"],
            isShow: false,
        }, {
            title: "科普志愿者",
            list: ["列表内容1", "列表内容2"],
            isShow: false,
        }, {
            title: "咨询服务",
            list: ["列表内容1", "列表内容2"],
            isShow: false,
        }, {
            title: "报名入口",
            list: ["列表内容1", "列表内容2"],
            isShow: false,
        },];

        var str = "";
        data.forEach(function (item) {
            // item得到数组内的每个元素
            str += ` <div class="list">
                        <h4>${item.title}</h4>
                        <ul>`;
            var str1 = "";
            for (var i = 0; i < item.list.length; i++) {
                // item.list[i]
                str1 += `<li>${item.list[i]}</li>`;
            }
            console.log(str1);
            str += str1 + "</ul></div>"

        })
        // console.log(str);

        var box = document.querySelector(".box");
        box.innerHTML = str;

        var h4s = document.querySelectorAll("h4");
        var uls = document.querySelectorAll("ul");
        for (var i = 0; i < h4s.length; i++) {
            // 设置自定义属性 给每个标签都添加一个 只是是当前标签的索引值
            h4s[i].index = i;
            h4s[i].onclick = function () {
                // 获取当前点击h4的索引值
                // console.log(this.index);
                var n = this.index;
                // 判断相对应索引值的data中的isShow属性如果是false 就执行
                if (!data[n].isShow) {
                    // 执行下拉的显示
                    for (var k = 0; k < uls.length; k++) {
                        uls[k].style.height = "0";
                        data[k].isShow = false;
                    }
                    var num = uls[n].children.length * uls[n].children[0].offsetHeight;
                    uls[n].style.height = num + "px";
                    data[n].isShow = true;
                } else {
                    uls[n].style.height = "0px";
                    data[n].isShow = false;
                }
            }

        }
    </script>
</body>

</html>